JavaScript删除元素、移除、remove、removeChild、querySelector |
您所在的位置：网站首页 › js body对象 › JavaScript删除元素、移除、remove、removeChild、querySelector |
|
文章目录
删除元素本身删除子元素删除父元素htmlJavaScriptremoveremoveChildquerySelector
删除元素本身
方法1.1 event.target.remove();方法1.2 event.target.parentNode.removeChild(event.target);方法2.1 idDeleteSelf.remove();方法2.2 idDeleteSelf.parentNode.removeChild(idDeleteSelf); 删除子元素 idParent.removeChild(idChild);记得给子元素做冒泡处理 删除父元素 idChildR.parentNode.parentNode.removeChild(idParentR); html 删除元素本身 删除子元素 子元素 删除父元素 父元素 JavaScript /** * 删除父元素 */ function deleteParent() { let idParentR = document.querySelector('#idParentR'), idChildR = document.querySelector('#idChildR'); if (idParentR && idChildR) idChildR.parentNode.parentNode.removeChild(idParentR); } /** * 禁止子元素冒泡 * @param {PointerEvent} event */ function stopPropagation(event) { event.stopPropagation(); } /** * 删除子元素 */ function deleteChild() { let idParent = document.querySelector('#idParent'), idChild = document.querySelector('#idChild'); if (idParent && idChild) idParent.removeChild(idChild); } /** * 删除元素本身 * @param {PointerEvent} 元素本身 */ function deleteSelf(event) { if (event.target) { // 方法1.1 // event.target.remove(); // 方法1.2 event.target.parentNode.removeChild(event.target); } // let idDeleteSelf = document.querySelector('#idDeleteSelf'); // if (idDeleteSelf) { // // 方法2.1 // // idDeleteSelf.remove(); // // 方法2.2 // idDeleteSelf.parentNode.removeChild(idDeleteSelf); // } } removeMDN Element.remove方法，把对象从它所属的DOM树中删除。 w3school remove方法从文档中删除元素(或节点)。 元素或节点是从文档对象模型(DOM)中删除的。 removeChildw3school removeChild方法删除元素的子节点。 该方法以Node对象返回被删除的节点；如果节点不存在，则返回null。 子节点从是文档对象模型(DOM)中删除的。但是，可以修改返回的节点并将其插回DOM。 MDN Node.removeChild方法从DOM中删除一个子节点。返回删除的节点。 querySelectorMDN 文档对象模型Document引用的querySelector方法返回文档中与指定选择器或选择器组匹配的第一个Element对象。如果找不到匹配项，则返回null。 w3school querySelector方法返回与CSS选择器匹配的第一个元素。 如需返回所有匹配项(不仅是第一个匹配项)，请改用querySelectorAll。 如果选择器无效，则querySelector和querySelectorAll都会抛出SYNTAX_ERR异常。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |